<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#showimg {
				background-image: url(../img/1.jpeg);
				width: 300px;
				height: 300px;
				background-size: cover;
				float: left;
			}
			#main {
				border: 1px solid;
				width: 600px;
				height: 600px;
				float: left;
				margin-left: 20px;
			}
			#main div {
				box-sizing: border-box;
				float: left;
				border: 1px solid white;
				background-image: url(../img/1.jpeg);
				
			}
			#outputDiv {
				width: 315px;
				height: 193px;
				display: none;
				background-image: url(img/游戏结束了.png);
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -157px;
				margin-top: -96px;
				line-height: 70px;
				color: white;
				text-align: center;
				font-size: 25px;
			}
			.a1{
				width: 100px;
				height: 30px;
				border: 1px solid;
				text-align: center;
				line-height:30px;
				background-color:  khaki;
				color: white;
				font-family: "微软雅黑";
				border-radius:8px ;
			}
			.a1:hover{
				background-color:  #F0E68C;
				cursor: pointer;
			}
			#a2{
				position: absolute;
				top:350px;
				left: 100px;
			}
		</style>
	</head>

	<body>
		<div id="outputDiv">
			<p>恭喜过关</p>
			<p onclick="next()">点击进行下一关</p>
		</div>
		<div id="a2">
		<div class="a1" onclick="opengame()">开始游戏</div>
		<div class="a1">增加难度</div>
		<div class="a1">减少难度</div>
		<div class="a1" onclick="waigua()">使用外挂</div>
	    <div class="a1" onclick="xiayiguan()">下一关</div>
	     <div class="a1" onclick="tuichu()">退出游戏</div>
	    </div>
		<div id="showimg"></div>
		<div id="main">
		</div>
		<div id="">
			
		</div>
		<script type="text/javascript">
			//动态改变可以增加难度
			var imgNum = 3;
			//存放成功后的数组
			var map = [];
			var dragDiv;
			//存放打乱的数组
			var arr = [];
			//换图片的变量
			var p = 1;
			//调用初始化数组和开始数组
			init();
			KaiShi();
//			function opengame() {
//				
//			}
			function KaiShi() {
				//动态创建div
				var main = document.getElementById("main");
				//在每次创建前清空一次，这样可以保证main的div里的数量不会重复
				main.innerHTML="";
				for(var i = 0; i < imgNum * imgNum; i++) {
					var newdiv = document.createElement("div");
					newdiv.style.width = 600 / imgNum + "px";
					newdiv.style.height = 600 / imgNum + "px";
					newdiv.style.backgroundImage = "url(../img/"+p+".jpeg)";
					main.appendChild(newdiv);
				};
				//随机排序
				arr = arr.sort(function(x, y) { 
					return Math.random() > 0.5 ? 1 : -1;
				});
				var divs = document.querySelectorAll("#main div");
				for(var i = 0; i < imgNum * imgNum; i++) {
					//循环遍历每一个div给每一个div赋值随机的坐标
					divs[i].style.backgroundPositionX = arr[i].x;
					divs[i].style.backgroundPositionY = arr[i].y;
					//给每一个div加上可拖动属性
					divs[i].draggable = "true";
					divs[i].ondragstart = function(e) {
						e=e||event;
						//返回那个dom元素出触发了事件   也就是返回每一个拖动的div
						dragDiv = e.target;    
					}
					divs[i].ondragenter = function() { return false; }
					divs[i].ondragover = function() { return false; }
					divs[i].ondrop = function(e) {
						var dragx = dragDiv.style.backgroundPositionX;
						var dragy = dragDiv.style.backgroundPositionY;
						var tarx = e.target.style.backgroundPositionX;
						var tary = e.target.style.backgroundPositionY;
						var temp = dragx;
						dragx = tarx;
						tarx = temp;
						temp = dragy;
						dragy = tary;
						tary = temp;
						dragDiv.style.backgroundPositionX = dragx;
						dragDiv.style.backgroundPositionY = dragy;
						e.target.style.backgroundPositionX = tarx;
						e.target.style.backgroundPositionY = tary;
						yanzheng();
					}
				}
			};
			//初始化函数
			function init() {
				var divs = document.querySelectorAll("#main div");
				var w = 600 / imgNum;
				var h = 600 / imgNum;
				for(var i = 0; i < imgNum; i++) {
					map[i] = [];
					for(var k = 0; k < imgNum; k++) {
						var divx = (-k * w) + "px";
						var divy = (-i * h) + "px";
						map[i][k] = { x: divx, y: divy };
						//向数组的末尾添加一个或多个元素并且返回新的长度
						arr.push({ x: divx, y: divy });
					}
				}
			}

			function yanzheng() {
				var divs = document.querySelectorAll("#main div");
				var index = 0;
				var count = 0;
				for(var i = 0; i < imgNum; i++) {
					for(var k = 0; k < imgNum; k++) {
						var divx = parseInt(divs[index].style.backgroundPositionX);
						var divy = parseInt(divs[index].style.backgroundPositionY);
						var mapx = parseInt(map[i][k].x);
						var mapy = parseInt(map[i][k].y);
						//						console.log(divx+","+divy);
						//						console.log(mapx+","+mapy);					
						if(mapx == divx && mapy == divy) {
							count++;
						};
						index++;
					};
				};    
				if(count == imgNum * imgNum) {
					document.getElementById("outputDiv").style.display = "block";
				};
			};
			var showimg = document.getElementById("showimg");
			var divs = document.querySelectorAll("#main div");

			//成功后的下一关
			function next() {
				p++;
				if (p==9) {
					p=1;
				}
				showimg.style.backgroundImage = "url(../img/"+p+".jpeg)";
				imgNum = imgNum + 1;  
				init();
				KaiShi();   
				yanzheng();
				document.getElementById("outputDiv").style.display = "none";
			}
			//直接到下一关
			function xiayiguan () {
				p++;
				if (p==9) {  
					p=1;
				}  
				showimg.style.backgroundImage = "url(../img/"+p+".jpeg)";
				imgNum = imgNum + 1;
				init();
				KaiShi();
				yanzheng();
				document.getElementById("outputDiv").style.display = "none";
			};
			function tuichu () {
				if (confirm("确定要退出游戏吗？")) {
					window.close();
				}
			};
			//外挂  循环遍历每一个div让每一个div的坐标都等于原始的坐标
//			function waigua () {
//				var divs = document.querySelectorAll("#main div");
//				var index = 0;
//				var count = 0;
//				for (var r = 0; r < imgNum * imgNum; r++) {
//					for (var q = 0; q < imgNum * imgNum; q++) {
//						var divx = parseInt(divs[index].style.backgroundPositionX);
//						var divy = parseInt(divs[index].style.backgroundPositionY);
//						var mapx = parseInt(map[r][q].x);
//						var mapy = parseInt(map[r][q].y);
//						if (divx == mapx&&divy == mapy) {
//							count++;
//						}
//						index++;
//				     	init();
//				KaiShi();
//				yanzheng();	
//					}
//				}
//			};
				function waigua() {
				var divs = document.querySelectorAll("#main div");
				var index = 0;
				for (var i = 0; i < map.length; i++) {
					for (var k = 0; k < map[i].length; k++) {
						divs[index].style.backgroundPositionX = map[i][k].x;
						divs[index].style.backgroundPositionY = map[i][k].y;
						index++;
					}
				}
			
			}
		</script>
	</body>

</html>